<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报修单位管理</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/>
    <style>
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {

            vertical-align: middle;

        }
        /*.table {*/
            /*width:2000px;*/
            /*max-width:8000px;*/

        /*}*/
    </style>
</head>
<body>
<div id="app" style="padding:10px;">
    <div id="tu" v-if="currentPicURL" style="text-align:center;position:fixed;width:100%;z-index:9999">
        <img :src="currentPicURL" title="双击关闭" @dblclick="currentPicURL=''"/>
    </div>

    <table class="table table-striped" >
        <thead>
        <tr>
            <th width="50">序号</th>
            <th width="100">唯一识别码</th>
            <th>单位联系人姓名</th>
            <th>单位联系手机号</th>
            <th>单位名称</th>
            <th>营业执照</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="b in bxms">
            <td>{{b.id}}</td>
            <td>{{b.openid}}</td>
            <td>{{b.name?b.name:'匿名'}}</td>
            <td>{{b.tel?b.tel:'未提供'}}</td>
            <td>{{b.cName?b.cName:'暂无单位名称'}}</td>
            <td><img
                    @click="showBigPic(b.zhizhao)"

                    width="50" :src="b.zhizhao?b.zhizhao:'../../images/zhizhao.png'" width="90%"/></td>
            <td>{{['待审核','启用','禁用','拒绝'][b.status]}}</td>
            <td>
                <div v-if="b.status==0||b.status==3">
                    <button type="button" class="layui-btn" @click="shenhe(b.id,1)">审核通过</button>
                    <button type="button" class="layui-btn layui-btn-danger" @click="shenhe(b.id,3)">审核拒绝</button>
                </div>

                <button type="button" v-else-if="b.status==1" class="layui-btn" @click="shenhe(b.id,2)">禁用</button>
                <button type="button" v-else-if="b.status==2" class="layui-btn" @click="shenhe(b.id,1)">启用</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div style="text-align:center;padding:20px;">{{ loadingtxt}}</div>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script>

    layui.use('layer');

    var v = new Vue({
        el: "#app",
        data: {
            currentPicURL: '',
            p: 1,
            size: 10,
            bxms: [],
            total: 0,
            pages: 0,
            loadingtxt:'拼命加载中...'
        },
        methods: {
            showBigPic: function (url) {
                this.currentPicURL = url ? url : '../../images/zhizhao.png'
            },
            shenhe: function (id, status) {
                if(status==3){
                    layer.open({
                            title: '系统提示'
                            ,content: '<div style="text-align:center"><input id="reject" placeholder="拒绝原因" /></div>',
                            yes: function(){
                                $.get("/bxm_shenhe", {bxm_id: id, status: status,rejectMsg:reject.value},
                                    function (data) {
                                    if (data==true) {
                                        layer.msg('设置成功！',{
                                            icon:1,
                                            time:1000
                                        },function(){
                                            location.reload();
                                        });
                                        loadData();
                                    }
                                })
                                layer.closeAll();
                            }
                    })
                }else {
                    $.get("/bxm_shenhe", {bxm_id: id, status: status}, function (data) {
                        if (data==true) {
                            layer.msg('操作成功！',{
                                icon:1,
                                time:1000
                            },function(){
                                location.reload();
                            });
                            loadData();
                        }
                    })
                }
            }
        }
    });

    loadData(v.p);

    function loadData(i) {
        if(v.loadingtxt=="我也是有底线的"){
            return ;
        }
        $.get("/find_all_baoxiuman", {p:i, size: v.size}, function (data) {
            console.log(data);
            v.total = data.totalElements;
            v.pages = data.totalPages;
            if(data.content.length==0){
                v.loadingtxt = "我也是有底线的"
            }
            v.bxms = v.bxms.concat(data.content);
        })
    }

    window.onscroll = function(){
        var ch = document.documentElement.clientHeight;
     var sh = document.documentElement.scrollHeight;
       var st=  document.documentElement.scrollTop;
       //console.log(Math.ceil(ch+st)+" "+ Math.ceil(sh))
       if(Math.ceil(ch+st)==Math.ceil(sh)){
           v.p++;
           loadData(v.p);
       }
    }
</script>
</body>
</html>